<template>
  <div class="click_main_container" v-show="isShowClickPopup" v-if="mapshow">
    <div class="tabs_container" v-if="ComInfoData">
      <!-- <div style="background-color: red">{{ componentName }}---{{ infodata }}</div> -->
      <!-- <p style="background-color: aliceblue"> -->
      <div
      v-if="ComInfoData.sttp != 5"
        @click="tabItemClick1('POICurrentData')"
        :class="componentName == 'POICurrentData' ? 'calss1' : 'calss2'"
        class="btns"
      >
        <img
          v-if="componentName == 'POICurrentData'"
          src="@/assets/rightMenu/selectInfo/button_info_active.png"
          alt=""
        />
        <img
          v-else
          src="@/assets/rightMenu/selectInfo/button_info.png"
          alt=""
        />
        <p>实时数据</p>
      </div>
      <div
      v-if="ComInfoData.sttp == 5"
      @click="tabItemClick1('POICurrentData')"
      :class="componentName == 'POICurrentData' ? 'calss1' : 'calss2'"
      class="btns"
    >
      <img
        v-if="componentName == 'POICurrentData'"
        src="@/assets/rightMenu/selectInfo/button_info_active.png"
        alt=""
      />
      <img
        v-else
        src="@/assets/rightMenu/selectInfo/button_info.png"
        alt=""
      />
      <p>管理机构</p>
    </div>
      <div
        v-if="ComInfoData.sttp != 5"
        @click="tabItemClick1('ChartCon')"
        :class="componentName == 'ChartCon' ? 'calss1' : 'calss2'"
        class="btns"
      >
        <img
          v-if="componentName == 'ChartCon'"
          src="@/assets/rightMenu/selectInfo/button_info_active.png"
          alt=""
        />
        <img
          v-else
          src="@/assets/rightMenu/selectInfo/button_info.png"
          alt=""
        />
        <p>历史数据</p>
      </div>
      <div
      v-if="ComInfoData.sttp != 5"
        @click="tabItemClick1('DetailModal')"
        :class="componentName == 'DetailModal' ? 'calss1' : 'calss2'"
        class="btns"
      >
        <img
          v-if="componentName == 'DetailModal'"
          src="@/assets/rightMenu/selectInfo/button_info_active.png"
          alt=""
        />
        <img
          v-else
          src="@/assets/rightMenu/selectInfo/button_info.png"
          alt=""
        />
        <p>测站详情</p>
      </div>

      <div
        v-if="ComInfoData.sp != 0"
        @click="tabItemClick1('ShiPinPlayer')"
        :class="componentName == 'ShiPinPlayer' ? 'calss1' : 'calss2'"
        class="btns"
      >
        <img
          v-if="componentName == 'ShiPinPlayer'"
          src="@/assets/rightMenu/selectInfo/button_info_active.png"
          alt=""
        />
        <img
          v-else
          src="@/assets/rightMenu/selectInfo/button_info.png"
          alt=""
        />
        <p>视频一路</p>
      </div>
      <div
        v-if="ComInfoData.sp == 2"
        @click="tabItemClick1('ShiPinPlayer2')"
        :class="componentName == 'ShiPinPlayer2' ? 'calss1' : 'calss2'"
        class="btns"
      >
        <img
          v-if="componentName == 'ShiPinPlayer2'"
          src="@/assets/rightMenu/selectInfo/button_info_active.png"
          alt=""
        />
        <img
          v-else
          src="@/assets/rightMenu/selectInfo/button_info.png"
          alt=""
        />
        <p>视频二路</p>
      </div>
      <!-- </p> -->

      <!-- <div v-if="ComInfoData.sttp == 1">
        <div 
        class="tab_item_btn"
        :class="{ active: btn.active }"
        v-for="(btn, index) in tabNameList"
        :key="index"
        @click="tabItemClick(btn, index)"
      >
        <img
          :src="btn.active ? btn.image_active : btn.image"
          alt=""
          :class="btn.active ? 'tab_item_btn_active' : 'tab_item_btn_unactive'"
        />
        <p>{{ btn.name }}</p>
      </div>
      </div> -->
      <!-- <div v-if="ComInfoData.sttp == 4"></div>
      <div v-if="ComInfoData.sttp == 5">
        <div
          class="tab_item_btn"
          :class="{ active: btn.active }"
          v-for="(btn, index) in tabsItemListSFZ"
          :key="index"
          @click="tabItemClick(btn, index)"
        >
          <img
            :src="btn.active ? btn.image_active : btn.image"
            alt=""
            :class="
              btn.active ? 'tab_item_btn_active' : 'tab_item_btn_unactive'
            "
          />
          <p>{{ btn.name }}</p>
        </div>
      </div>
      <div v-if="ComInfoData.sp == 1">
        <div
          class="tab_item_btn"
          :class="{ active: btn.active }"
          v-for="(btn, index) in shipinTabsList1"
          :key="index"
          @click="tabItemClick(btn, index)"
        >
          <img
            :src="btn.active ? btn.image_active : btn.image"
            alt=""
            :class="
              btn.active ? 'tab_item_btn_active' : 'tab_item_btn_unactive'
            "
          />
          <p>{{ btn.name }}</p>
        </div>
      </div>
      <div v-if="ComInfoData.sp == 2">
        <div
          class="tab_item_btn"
          :class="{ active: btn.active }"
          v-for="(btn, index) in shipinTabsList2"
          :key="index"
          @click="tabItemClick(btn, index)"
        >
          <img
            :src="btn.active ? btn.image_active : btn.image"
            alt=""
            :class="
              btn.active ? 'tab_item_btn_active' : 'tab_item_btn_unactive'
            "
          />
          <p>{{ btn.name }}</p>
        </div>
      </div>
      <div v-else>
        <div
          class="tab_item_btn"
          :class="{ active: btn.active }"
          v-for="(btn, index) in tabsItemList"
          :key="index"
          @click="tabItemClick(btn, index)"
        >
          <img
            :src="btn.active ? btn.image_active : btn.image"
            alt=""
            :class="
              btn.active ? 'tab_item_btn_active' : 'tab_item_btn_unactive'
            "
          />
          <p>{{ btn.name }}</p>
        </div>
      </div> -->
    </div>
    <!-- <div class="click_main_content">
        <div class="click_main_title">
          <span>{{ titleText }}</span>
        </div>
        <div class="click-close" @click="handleClose"></div>
        <div class="click-content">
          <keep-alive>
            <component :is="componentName" :paramsData="paramsData" ></component>
          </keep-alive>
        </div>
      </div>
    </div> -->
    <!-- <div style="background-color: #ffffff">{{ paramsData }}</div> -->
    <!-- <div style="background-color: yellow">{{ JSON.parse(ComInfoData).sttp }}</div> -->

    <div class="click_main_content">
      <div class="click_main_title">
        <span>{{ titleText }}</span>
        <img
          src="@/assets/poipopup/title-bg.png"
          alt=""
        />
      </div>
      <!-- <div class="click-close" @click="handleClose"></div> -->
      <div class="click-content">
        <!-- <span style="color:aliceblue">{{ paramsData }}</span> -->
        <!-- <keep-alive> -->
        <component :is="componentName" :paramsData="paramsData"></component>
        <!-- </keep-alive> -->
        <!-- <POICurrentData v-show="componentName == 'CurrentData'" :paramsData="paramsData" />
        <ChartCon v-show="componentName == 'ChartCon'" :paramsData="paramsData" />
        <DetailModal v-show="componentName == 'DetailModal'" :paramsData="paramsData" /> -->
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/js/EventBus";
import DetailModal from "./DetailModal.vue";
import ChartCon from "./ChartCon.vue";
import POICurrentData from "./POICurrentData.vue";
import ShiPinPlayer from "./ShiPinPlayera.vue";
import ShiPinPlayer2 from "./ShiPinPlayerb.vue";

export default {
  name: "ClickPopup",
  components: {
    DetailModal,
    ChartCon,
    POICurrentData,
    ShiPinPlayer,
    ShiPinPlayer2,
  },
  props: {
    paramsData: {
      type: Object,
      default: function () {
        return {};
      },
    },
    infodata: {
      type: String,
      default: () => "",
    },
  },
  created() {
    // console.log(this.infodata,"this.infodata")
    // Bus.$emit("infodata", this.infodata);
    if (this.infodata) {
      let info = JSON.parse(this.infodata);
      // if (info.sttp == 5) {
      //   this.componentName = "DetailModal";
      // } else {
        this.componentName = "POICurrentData";
      // }
    }
  },
  // computed: {
  //   tabNameList() {
  //     if(this.paramsData.sttp == "5"){
  //       return this.tabsItemListSFZ
  //     }else{
  //       // return this.tabsItemList
  //       debugger
  //        if(this.paramsData && this.paramsData.hasOwnProperty('sp') && this.paramsData.sp == "1"){
  //             return this.shipinTabsList1;
  //           }else if(this.paramsData && this.paramsData.hasOwnProperty('sp') && this.paramsData.sp == "2"){
  //             return this.shipinTabsList2;
  //           }else{
  //             return this.tabsItemList
  //           }
  //     }
  //   },

  // },
  computed: {
    mapshow() {
      return this.$store.getters.mapshow;
    },
    ComInfoData() {
      return JSON.parse(this.infodata);
    },
  },

  watch: {
    infodata(newVal, oldVal) {
      // debugger;
      console.log(newVal, "newVal");
      // console.log(oldVal, "oldVal");
      let info = JSON.parse(newVal);
      // if (info.sttp == "5") {
      //   this.componentName = "DetailModal";
      // } else {
        this.componentName = "POICurrentData";
      // }

      // console.log(newVal, "newVal");
      // console.log(oldVal, "oldVal");
    },
    // mapshow(newval,oldval){
    //     // console.log(newval,"newval==========")
    //     this.isShowClickPopup=newval
    //     // this.isShow=newval
    //     // this.doSetIsShow()
    //   },
    // paramsData: {
    //   // sttp: 0 => 分界监控点， 1 =》 非分界监控点， 2=》 蓄水池， 3 =》 泵站， 4 =》 水厂， 5 =》收费站
    //   handler(newVal, oldVal) {
    //     // console.log(newVal, "newVal");
    //     // console.log(oldVal, "oldVal");

    //     //水厂暂无弹框和悬停
    //     if (newVal && newVal.hasOwnProperty("sttp") && newVal.sttp == "4") {
    //       this.isShowClickPopup = false;
    //     } else {
    //       this.isShowClickPopup = true;
    //       if (this.paramsData.sttp == "5") {
    //         //收费站
    //         this.tabNameList = this.tabsItemListSFZ;
    //       } else {
    //         if (newVal && newVal.hasOwnProperty("sp") && newVal.sp == "1") {
    //           this.tabNameList = this.shipinTabsList1;
    //         } else if (
    //           newVal &&
    //           newVal.hasOwnProperty("sp") &&
    //           newVal.sp == "2"
    //         ) {
    //           this.tabNameList = this.shipinTabsList2;
    //         } else {
    //           this.tabNameList = this.tabsItemList;
    //         }
    //         // this.tabNameList = this.tabsItemList
    //       }
    //     }
    //     this.setActiveTabs(0);
    //     this.componentName = "POICurrentData";
    //   },
    //   // immediate:true,
    //   deep: true,
    // },
  },
  data() {
    return {
      titleText: "click输水西干一级供水北干管",
      isShowClickPopup: true,
      tabNameList: [],
      tabsItemList: [
        {
          name: "实时数据",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: true,
          component: "POICurrentData",
          // fun: getPOIHoverData,
        },
        {
          name: "历史数据",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: false,
          component: "ChartCon",
          // fun: getPOIClickData,
        },
        {
          name: "测站详情",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: false,
          component: "DetailModal",
          // fun: getPOIDetail,
        },
      ],
      shipinTabsList1: [
        {
          name: "实时数据",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: true,
          component: "POICurrentData",
          // fun: getPOIHoverData,
        },
        {
          name: "历史数据",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: false,
          component: "ChartCon",
          // fun: getPOIClickData,
        },
        {
          name: "测站详情",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: false,
          component: "DetailModal",
          // fun: getPOIDetail,
        },
        {
          name: "视频一路",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: false,
          component: "ShiPinPlayer",
          // fun: getPOIHoverData,
        },
      ],
      shipinTabsList2: [
        {
          name: "实时数据",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: true,
          component: "POICurrentData",
          // fun: getPOIHoverData,
        },
        {
          name: "历史数据",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: false,
          component: "ChartCon",
          // fun: getPOIClickData,
        },
        {
          name: "测站详情",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: false,
          component: "DetailModal",
          // fun: getPOIDetail,
        },
        {
          name: "视频一路",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: false,
          component: "ShiPinPlayer",
          // fun: getPOIHoverData,
        },
        {
          name: "视频二路",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: false,
          component: "ShiPinPlayer2",
        },
      ],
      tabsItemListSFZ: [
        {
          name: "测站详情",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: true,
          component: "DetailModal",
        },
      ],
      isShowHoverPopup: false,
      componentName: null,
    };
  },

  methods: {
    // tabItemClick(btn, index) {
    //   this.tabNameList.map((item) => {
    //     item.active = false;
    //   });
    //   btn.active = true;
    //   this.componentName = btn.component;
    // },
    tabItemClick1(btn) {
      this.componentName = btn;
    },

    /**
     * 初始化tab页状态
     * @param {*} index 需要active的tabitem
     */
    // setActiveTabs(index) {
    //   this.tabNameList.forEach((element, i) => {
    //     if (index == i) {
    //       element.active = true;
    //     } else {
    //       element.active = false;
    //     }
    //   });
    // },

    handleClose() {
      // this.isShowClickPopup = false;
      this.$parent.setIsShow(false);
    },
  },
};
</script>

<style lang="scss" scoped>
.click_main_container {
}

.tabs_container {
  display: flex;
}

.tab_item_btn {
  width: 110px;
  height: 30px;
  position: relative;
  left: 1px;
  color: rgba(255, 255, 255, 0.5);
  top: 3px;
  cursor: pointer;
}

.tab_item_btn.active {
  color: #fff;
  z-index: 999;
}

.tab_item_btn_active {
  width: 126%;
  height: 100%;
  z-index: 999;
}

.tab_item_btn_unactive {
  width: 126%;
  height: 100%;
  z-index: 998;
}

.tab_item_btn p {
  font-family: SourceHanSansCN-Regular;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translate(10%, -50%);
}

.click_main_content {
  width: 540px;
  height: 243px;
  background: url('@/assets/poipopup/poi-popup-bg-583-243.png');
  background-size: 100% 100%;
}

.click_main_title {
  height: 42px;
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  background-size: 100% 100%;
  text-align: left;
  padding-left: 20px;
  background-color: rgba(48, 9, 244, 0);
}

.click_main_title span {
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 42px;
  letter-spacing: 0px;
  color: #ffffff;
  background-image: linear-gradient(to bottom, #fff 30%, #00baff);
  /*  背景线性渐变 */
  background-clip: text;
  -webkit-background-clip: text;
  /* 背景被裁减为文字的前景色 */
  -webkit-text-fill-color: transparent;
  /* 文字填充为透明，优先级比color高。  */
}

.click_main_title img {
  position: relative;
  top: -14px;
  left: -19px;
}

.click-close {
  width: 14px;
  height: 15px;
  background: url("@/assets/poipopup/poi_popup_close.png");
  position: relative;
  top: -24px;
  left: 658px;
  cursor: pointer;
}

.click-content {
  padding: 8px 10px;
  height: calc(100% - 62px);
  overflow-y: auto;
  width: 96%;
  /* // background-color: red; */

  &::-webkit-scrollbar {
    width: 10px;
    height: 1px;
    background: rgba(5, 58, 94, 1);
    display: block;
    border-radius: 3px;
    }

    /*滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #046b98
    }

    /*滚动条里面轨道*/
    &::-webkit-scrollbar-track {
        border-radius: 3px;
        background: transparent;
    }
}
.btns {
  width: 100px;
  // padding: 0 20px;
  height: 30px;
  line-height: 30px;
  position: relative;
}
.btns p {
  font-family: SourceHanSansCN-Regular;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translate(10%, -50%);
}
.calss1 {
  color: #fff;
}
.calss2 {
  color: rgba(255, 255, 255, 0.5);
}
</style>
